newVal
<script lang="ts" setup>
import { get, post, Message, loadFile } from '@/utils'
import { LineSeriesOption } from 'echarts'
import { ToolTipFormatterParams } from '@/types/echarts'
import useThemes from '@/hooks/themes'
const props = defineProps<{
  lineColor: string
  areaColor: string
  titles: string[]
  data: number[]
  title: string
  loading: boolean
}>()
const { isDark } = useThemes()
watch(
  () => props.data,
  newVal => {
    console.log(props)

    if (newVal.length) {
      Object.assign(chartOption, {
        title: {
          text: props.title,
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '10%',
          bottom: '40',
        },
        xAxis: {
          type: 'category',
          offset: 2,
          data: props.titles,
          boundaryGap: false,
          axisLabel: {
            color: '#4E5969',
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisPointer: {
            show: true,
            lineStyle: {
              color: '#23ADFF',
              width: 1,
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: isDark.value ? '#2E2E30' : '#F2F3F5',
            },
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            const [firstElement] = params as ToolTipFormatterParams[]
            return `<div>
              <p class="tooltip-title">${firstElement.axisValueLabel}</p>
              ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
            </div>`
          },
          className: 'echarts-tooltip-diy',
        },

        series: [generateSeries(props.title, props.lineColor, props.areaColor, props.data)],
      })
    }
  }
)
/**图表数据 */
const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  return items
    .map(
      (el: any) => `<div class="content-panel">
          <p>
            <span style="background-color: ${el.color}" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
          </p>
          <span class="tooltip-value">${el.value.toLocaleString()}</span>
        </div>`
    )
    .reverse()
    .join('')
}
const generateSeries = (name: string, lineColor: string, itemBorderColor: string, data: number[]): LineSeriesOption => {
  return {
    name,
    data,
    stack: 'Total',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 10,
    itemStyle: {
      color: lineColor,
    },
    emphasis: {
      focus: 'series',
      itemStyle: {
        color: lineColor,
        borderWidth: 2,
        borderColor: itemBorderColor,
      },
    },
    lineStyle: {
      width: 2,
      color: lineColor,
    },
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
      color: lineColor,
    },
  }
}
const chartOption = reactive({
  title: {
    text: props.title,
  },
  grid: {
    left: '10%',
    right: '10%',
    top: '10%',
    bottom: '40',
  },
  xAxis: {
    type: 'category',
    offset: 2,
    data: props.titles,
    boundaryGap: false,
    axisLabel: {
      color: '#4E5969',
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisPointer: {
      show: true,
      lineStyle: {
        color: '#23ADFF',
        width: 1,
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        color: isDark.value ? '#2E2E30' : '#F2F3F5',
      },
    },
  },
  tooltip: {
    trigger: 'axis',
    formatter(params) {
      const [firstElement] = params as ToolTipFormatterParams[]
      return `<div>
              <p class="tooltip-title">${firstElement.axisValueLabel}</p>
              ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
            </div>`
    },
    className: 'echarts-tooltip-diy',
  },

  series: [],
} as any)
</script>
<template>
  <a-spin :loading="props.loading" style="width: 100%; height: 100%">
    <Chart :option="chartOption" />
  </a-spin>
</template>
<style lang="less" scoped></style>
